<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- 每一个计算属性包含setter和getter，我们前面的例子都是默认用法
            只是利用了getter来获取、读取数据、需要的时候，我们也可以提供setter函数，来手动修改计算属性的值
            当尝试改变计算属性的时候，他会让计算属性调用或者说触发setter函数，从而执行setter函数内部自定义处理程序 -->

<!-- 全局声明 filter -->
<!-- Vue.filter() -->
        <p>{{msg}}</p>
    </div>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                firstName:'Shane',
                lastName:'He',
            },
            computed:{
                //计算属性，默认用法，匿名函数
                fullName:{// 计算属性 完整的用法 对象，对象里面必须有get和set 键值对
                    get(){
                        console.log("调用get方法")
                        return this.lastName + " " +this.firstName
                    },
                    set(newValue){
                        names = newValue.split(" ")
                        console.log("调用set方法")
                        this.firstName = names[1]
                        this.lastName = names[0]
                    }
                }
            }
        })
    </script>
</body>
</html>